<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
    <style>
      body { font-family: Tahoma, Geneva, sans-serif; }
    </style>
    <script src="colyseus.js"></script>
  </head>
  <body>
    <strong>Messages</strong><br>

    <form id="form">
      Room name: <input type="text" id="room_name" value="cloudTest" /> <br />

      Send data: <input type="text" id="message_type" value="" placeholder="messageType" />
                 <input type="text" id="message_data" value="" placeholder="data" />
                 <input type="submit" value="send" />
    </form>

    <div id="messages"></div>

    <button onclick="join()">Join</button>
    <button onclick="joinOrCreate()">Join or create</button>
    <button onclick="create()">Create</button>
    <button onclick="joinByLastId()">Join by last id</button>
    <button onclick="getAvailableRooms()">List avaiable rooms</button>
    <button onclick="closeConnection()">Close connection</button>
    <button onclick="reconnect()">Re-join last closed connection</button>

    <script>
      var host = (window.document.location.host || "localhost").replace(/:.*/, '');
      var client = new Colyseus.Client('wss://colyseus.fjsfs.cn');
      var room;

      function addListeners (room) {
          console.log('joined!');
          room.onMessage("*", (type, message) => {
              console.log("received message:", type, "=>", message);
          });

          room.onLeave(function() {
              console.log("LEFT ROOM", arguments);
          });

          room.onStateChange(function(state) {
              console.log("state change: ", state.toJSON());
          });
      }

      function join () {
          client.join(document.getElementById('room_name').value, { code: "one" }).then((r) => {
              room = r;
              addListeners(room);
          }).catch(e => {
              console.error(e.code, e.message);
          });
      }

      function create () {
          client.create(document.getElementById('room_name').value, { code: "one" }).then((r) => {
              room = r
              addListeners(room);
          });
      }

      function joinOrCreate () {
          client.joinOrCreate(document.getElementById('room_name').value).then((r) => {
              room = r
              addListeners(room);
          });
      }

      function joinByLastId () {
          client.joinById(room.id).then(r => {
            room = r;
            addListeners(room);
          });
      }

      function getAvailableRooms() {
          client.getAvailableRooms(document.getElementById('room_name').value).then((rooms) => {
              console.log(rooms);
          }).catch(e => {
              console.error(e);
          });
      }

      function reconnect() {
        client.reconnect(room.id, room.sessionId).then(r => {
            room = r;
            addListeners(room);
        });
      }

      function closeConnection() {
        room.connection.close();
      }

      document.getElementById('form').onsubmit = function(e) {
        e.preventDefault()

        room.send(document.getElementById('message_type').value, document.getElementById('message_data').value);

        // room.send(document.getElementById('input').value);
        document.getElementById('message_data').value = null
      }
    </script>

  </body>
</html>
